@charset "utf-8";
body{
  font-size:15px;
  width:100%;
  max-width:768px;
  margin:auto;
}
:root {
  --whiteff: #fff;
  --whitef1: #f1f1f1;
  --graye6 : #e6e6e6;
  --black22: #222;
  --gray44: #444;
  --gray55: #555;
  --gray66: #666;
  --gray8e: #8e8e8e;
  --gray99: #999;
  --graydd: #ddd;
  --redec: #ec463d;
  --blue00: #004eff;
  --skyblue00: #0092e6;
  --surfcolor : #f47321;
  --yellowf3:#f3f302;
  --blueTee1c:#1c499e;
}

* {
  box-sizing: border-box;
}
.mt5 {
  margin-top: 5px !important;
}
.mt10 {
  margin-top: 10px !important;
}
.mt15 {
  margin-top: 15px !important;
}
.mt20 {
  margin-top: 20px !important;;
}
.mt30 {
  margin-top: 30px !important;
}
.mt40 {
  margin-top: 40px !important;
}
.mt50 {
  margin-top: 50px !important;
}
.mt70 {
  margin-top: 70px !important;
}
.mb5 {
  margin-bottom: 5px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.mb15 {
  margin-bottom: 15px !important;
}
.mb20 {
  margin-bottom: 20px !important;
}
.mb30 {
  margin-bottom: 30px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb50 {
  margin-bottom: 50px !important;
}
.mb70 {
  margin-bottom: 70px !important;
}
.mb100 {
  margin-bottom: 100px !important;
}
.mr5 {
  margin-right: 5px !important;
}
.mr10 {
  margin-right: 10px !important;
}
.mr20 {
  margin-right: 20px !important;
}
.mr30 {
  margin-right: 30px !important;
}
.mr40 {
  margin-right: 40px !important;
}
.mr50 {
  margin-right: 50px !important;
}
.mr70 {
  margin-right: 70px !important;
}

.ml5 {
  margin-left: 5px !important;
}
.ml10 {
  margin-left: 10px !important;
}
.ml20 {
  margin-left: 20px !important;
}
.ml30 {
  margin-left: 30px !important;
}
.ml40 {
  margin-left: 40px !important;
}
.ml50 {
  margin-left: 50px !important;
}
.ml70 {
  margin-left: 70px !important;
}

.pt10 {
  padding-top: 10px !important;
}
.pt20 {
  padding-top: 20px !important;
}
.pt30 {
  padding-top: 30px !important;
}
.pt40 {
  padding-top: 40px !important;
}
.pt50 {
  padding-top: 50px !important;
}
.pt70 {
  padding-top: 70px !important;
}
.pb10 {
  padding-bottom: 10px !important;
}
.pb20 {
  padding-bottom: 20px !important;
}
.pb30 {
  padding-bottom: 30px !important;
}
.pb40 {
  padding-bottom: 40px !important;
}
.pb50 {
  padding-bottom: 50px !important;
}
.pb70 {
  padding-bottom: 70px !important;
}
.pb80 {
  padding-bottom: 80px !important;
}
.pb100 {
  padding-bottom: 100px !important;
}


.pr10 {
  padding-right: 10px !important;
}
.pr20 {
  padding-right: 20px !important;
}
.pr30 {
  padding-right: 30px !important;
}
.pr40 {
  padding-right: 40px !important;
}
.pr50 {
  padding-right: 50px !important;
}
.pr70 {
  padding-right: 70px !important;
}

.pl10 {
  padding-left: 10px !important;
}
.pl20 {
  padding-left: 20px !important;
}
.pl30 {
  padding-left: 30px !important;
}
.pl40 {
  padding-left: 40px !important;
}
.pl50 {
  padding-left: 50px !important;
}
.pl70 {
  padding-left: 70px !important;
}


.pdTB50{
  padding:50px 0 !important;
} 
.pd20{
  padding:0 20px;
}
.border_top{
  border-top:1px solid #ddd;
}
.border_bottom{
  border-bottom:1px solid #ddd;
}
.box_wrap{
  padding:0 20px;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 2; /* 230509 5*/
}
.flex{
  display:flex;
}
.gap5{
  gap:5px;
}
.gap10{
  gap:10px;
}
.align_center{
  align-items: center;
}
.justify_between{
  justify-content: space-between;
}
.header {
  position: static;
  background: #fff;
}
.top_depth {
  border-bottom: 1px solid #e6e6e6;
}
.top_depth a {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #474747;
  text-align: center;
  border-bottom: 2px solid #fff;
  padding: 20px 0;
}
.top_depth a.active {
  color: #222;
  border-bottom: 2px solid #222;
}
.s_tab {
  background: #fff;
  overflow: hidden;
  /* box-shadow: 0px 3px 10px -5px rgb(34 34 34 / 15%); */
}

.h_profile .s_lang button {
  display: block;
  background: url("../images/ic-website-white.svg") no-repeat 50% 50%;
  width: 30px;
  height: 30px;
  margin: 0 0 0 9px;
}

/* 헤더 나누기 */
.akasaka_head.header-page-info{
  display:none;
}
.akasaka_head.header-page-back li.close button,
.akasaka_head.header-page-info li.close button{
  width:30px;
  height:24px;
  background:url(../images/ico-close-thin.svg) center no-repeat;
  padding:0;
}


/* 버튼스타일 */
button{
  padding:8px 20px;
  border-radius:5px;
  font-size:14px;
  box-sizing: border-box;
}
button.surf_btn{
  background:var(--surfcolor);
  color:var(--whiteff);
}
button.surf_btn_line{
  border:1px solid var(--surfcolor);
  color:var(--surfcolor);
}
button.black_btn{
  background:var(--black22);
  color:var(--whiteff);
}
button.gray_btn{
  background:var(--gray8e);
  color:var(--whiteff);
}




.tabs {
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
}
.tabs .swiper-slide {
  width: auto;
  margin-right: 5px;
}
.tabs .swiper-slide a {
  display: block;
  font-size: 14px;
  background: #f5f5f5;
  color: #494949;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 500;
}
.tabs .swiper-slide.active a {
  background: #ec463d;
  color: #fff;
}

.tabs_sub {
  padding: 20px;
  background: #fff;
  box-sizing: border-box;
}
.tabs_sub .swiper-slide {
  width: auto;
  margin-right: 5px;
}
.tabs_sub .swiper-slide a {
  display: block;
  font-size: 14px;
  background: #fff;
  color: #666;
  border:1px solid #666;
  border-radius: 4px;
  padding: 10px 16px;
  font-weight: 500;
}
.tabs_sub .swiper-slide.active a {
  border:1px solid #ec463d;
  color: #ec463d;
  background:#fff;
}



#container {
  position: relative;
  max-width: 768px;
  margin: 0 auto;
}
#qr_container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}
#qr_container .nav,
.nav {
  display: flex;
  gap:20px;
  padding-bottom: 5px;
  /* border-bottom: 1px solid #ddd; */
  margin-bottom: 20px;
  flex-wrap: wrap;
  line-height: 1.2;
}
#qr_container .nav li,
.nav li {
  font-size: 15px;
  color: #222;
  position: relative;
}
#qr_container .nav li:after,
.nav li:after {
  content: " > ";
  color: #222;
  display: inline-block;
  padding: 0 8px;
  position:absolute;
  right:-23px;
  top:0;
}
#qr_container .nav li:last-child,
.nav li:last-child {
  font-weight: bold;
  width: calc(100% - 120px);
}
#qr_container .nav li:last-child a,
.nav li:last-child a {
  width: 100%;
  text-overflow: ellipsis;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
#qr_container .nav li:last-child:after,
.nav li:last-child:after {
  display: none;
}

#titleArea {
  position: relative;
  background: #222222;
  box-shadow: 0px 2px 10px rgba(34, 34, 34, 0.05);
  padding: 20px;
  box-sizing: border-box;
  height: 55px;
}
#titleArea .qr_surf_logo {
  width: 80px;
}
#titleArea h3 {
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  padding: 0 25px;
  box-sizing: border-box;
}
#titleArea h3.fl {
  padding: 0;
}
#titleArea .fl {
  margin-top: -1px;
}
#titleArea .fl,
#titleArea .fr {
  position: relative;
  z-index: 1;
}

#titleArea .fl img {
  vertical-align: 1px; /* 230227 0px */
}
#titleArea .fr.m_menubtn {
  width: 30px;
  height: 30px;
  background: url("../images/ic_nav_white.svg") center no-repeat;
  background-size: 34px;
  margin-top: -6px;
}
#titleArea .fr button {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
#titleArea .fr button img {
  vertical-align: middle;
}
#titleArea .fr button.profile {
  width: 30px;
  height: 30px;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  background: #f5f5f5 url("../images/ic_user.svg") no-repeat 50% 50%;
  box-sizing: border-box;
}
#titleArea .fr button.profile img {
  width: 100%;
}
#titleArea strong {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  position: absolute;
  left: 0;
  padding: 0 20%;
  width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 30px;
  white-space: nowrap;
}

/* 식재료상세페이지 상단 언어설정 및 닫기버튼 */
.titleTop{
  width:100%;
  position:relative;
}
.titleTop .pageClose{
  width:20px;
  height:20px;
  background:url(../images/ico-close-thin.svg) center no-repeat;
  background-size:100%;
  position:absolute;
  right:0;
  top:4px;
  z-index: 1;
}

.ingredient_detail .section .lang_box{
  position:absolute;
  top:3px;
  right:35px;
}
.lang_select .select_lang{
  width:24px;
  height: 24px;
  background:url(../images/ic-website3.svg) center no-repeat;
  background-size:100%;
}

.menu_course .section .slide .swiper-pagination{
  z-index:2;
}

/* 햄버거메뉴스타일 */
.m_menuWrap{
  background:#fff !important;
}
.m_menuWrap .m_logo{
  border-bottom:1px solid var(--graydd);
}
.m_menuWrap .m_logo span{
  position:static !important;
}
.m_menuWrap .m_logo h1{
  color: var(--surfcolor);
}
.m_menuWrap .m_logo .lang_hamberger{
  display:flex;
  align-items: center;
  gap:5px;
}
.m_menuWrap .m_logo .lang_hamberger p{
  font-size:18px;
  font-weight: 300;
}
.m_menuWrap .menu_icon{
  display: flex;
  flex-wrap:wrap;
  margin-bottom:20px;
  border-bottom:0;
  border-top:0;
  padding-top:0px;
  margin-top:0;
  border-bottom:1px solid var(--graydd);
}
.m_menuWrap .menu_icon li{
  width:25%;
  height: 60px;;
  text-align: center;
  border-right:1px solid #ddd;
  margin-bottom:0px;
  padding:5px;
  position:relative;
  margin-top:0px;
}
.m_menuWrap .menu_icon li:nth-child(4n){
  border-right:0;
}

.m_menuWrap .menu_icon li.on{
  background:var(--surfcolor);
}
.m_menuWrap .menu_icon li.on p{
  color:var(--whiteff);
}

.m_menuWrap .menu_icon li:nth-child(1):after,
.m_menuWrap .menu_icon li:nth-child(2):after,
.m_menuWrap .menu_icon li:nth-child(3):after,
.m_menuWrap .menu_icon li:nth-child(4):after{
  content:"";
  width:100%;
  height:1px;
  background:#ddd;
  position:absolute;
  bottom:0px;
  left:0;
}
.m_menuWrap .menu_icon li img{
  width:30px;
  height: 30px;
  margin-bottom:6px;
}

.m_menuWrap .menu_icon li p{
  font-size:12px;
  color:#666;
  font-weight: 600;
  padding-top:0px;
}

.m_menuWrap .menu_icon li a{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  padding-top:8px;;
}
.m_menuWrap .hotel_info{
  width:100%;
  padding:0 20px;
}
.m_menuWrap .hotel_info dl{
  margin-bottom:20px;
}
.m_menuWrap .hotel_info dl dt{
  font-size:16px;
  font-weight: 600;
  color: var(--black22);
  margin-bottom:10px;
}
.m_menuWrap .hotel_info dl dd{
  font-size:13px;
  color: var(--gray55);
  line-height:1.5
}
.m_menuWrap .hotel_info dl dd .call_btn{
  width:20px;
  height:20px;
  border-radius: 50px;
  background:#f47321 url(../images/icon_call_white.svg) center no-repeat;
  background-size:12px;
  padding:3px;;
}
.m_menuWrap .hotel_info dl dd .mapViewBtn{
  width:100%;
  height: 35px;
  border:1px solid var(--gray44);
  border-radius: 5px;
  font-size:13px;;
  padding:5px;
  margin-top:10px;
}
.m_menuWrap .hotel_info dl dd .homeLink{
  color:#2674e0;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;  
}

.m_menuWrap .hotel_info dl dd table th{
 text-align: left;;
 font-size:13px;
 vertical-align: top;
 font-weight: 500;
 width: 100px;
}
.m_menuWrap .hotel_info dl dd table td{
  font-size:13px;
}
.m_menuWrap .hotel_info dl dd ol{
  display: flex;;
}
.m_menuWrap .hotel_info dl dd ol li:first-child{
  text-align: left;;
  font-size:13px;
  vertical-align: top;
  font-weight: 500;
  width: 100px;
}
.m_menuWrap .hotel_info dl dd ol li:last-child{
  width: calc(100% - 100px);
  font-size:14px;
  color:var(--gray55);
}

#side {
  width: 100%;
  max-width: 1140px;
  position: fixed;
  top: 0px;
  right: -100%;
  z-index: 15;
  height: 100%;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.16);
  transition: all 0.2s;
}
#side.on {
  right: 0%;
}
#side .box {
}
#side .box .top {
  background: #fafafa;
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
}
#side .box .top .member_info {
  position: relative;
  align-items: center;
}
#side .box .top .member_info .profile_img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #d3d3d3;
  background: #f5f5f5 url("../images/ic_user.svg") no-repeat 50% 50%;
  box-sizing: border-box;
  margin-right: 15px;
}
#side .box .top .member_info .info strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #222;
}
#side .box .top .member_info .info p {
  font-size: 12px;
  color: #6a6a6a;
  margin-top: 7px;
}
#side .box .top .member_info .setting {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 20px;
  height: 20px;
  background: url("../images/ico-setting.svg") no-repeat 50% 50% / 15px;
}
#side .box .top .grid3 {
  margin-top: 30px;
}
#side .box .top .grid3 > div {
  flex: 1;
}
#side .box .top .grid3 > div a {
  display: block;
  text-align: center;
  color: #6a6a6a;
  font-size: 12px;
  padding-top: 30px;
}
#side .box .top .grid3 > div:nth-child(1) a {
  background: url("../images/ic_product_wish.png") no-repeat 50% 0 / 20px;
}
#side .box .top .grid3 > div:nth-child(2) a {
  background: url("../images/side-2.svg") no-repeat 50% 0 / 20px;
}
#side .box .top .grid3 > div:nth-child(3) a {
  background: url("../images/ico-diary.svg") no-repeat 50% 0 / 20px;
}
#side .box .top .grid3 > div a span {
  color: #ec463d;
  font-size: 12px;
  font-weight: 700;
}
#side .box .side_menu li a {
  display: block;
  border-bottom: 1px solid #e6e6e6;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  padding: 15px 20px;
}
#side .language {
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}
#side .language strong {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  width: 110px;
}
#side .language select {
  font-size: 14px;
  color: #222;
  height: 40px;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  font-weight: 400;
  background: #fff url("../images/arrow-down-gray.svg") no-repeat
    calc(100% - 15px) 50% / 10px;
}
.link_banner{
  width:100%;
}
.link_banner img{
  width:100%;
}
#footer {
  position: relative;
  background: #f1f1f1;
  text-align: center;
  padding: 30px 20px;
  margin-top: 0px;
}
#footer img {
  width: 80px;
}
#footer .util {
  margin: 45px 0 15px;
  font-size: 0;
}
#footer .util a {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #494949;
  font-size: 13px;
  font-weight: 500;
}
#footer .util a:first-child:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #494949;
  margin: 0 8px;
}
#footer .addr {
  font-size: 0;
  line-height: 1.7;
  margin-top: 20px;
}
#footer .addr span {
  display: inline-block;
  vertical-align: middle;
  color: #494949;
  font-size: 12px;
}
#footer .addr span:after {
  content: "|";
  display: inline-block;
  vertical-align: 0px;
  margin: 0 5px;
}
#footer .addr span.last:after {
  display: none;
}

#footer h4{
  font-size:14px;
  font-weight: 600;
  color: var(--gray44);
}
#footer p{
  font-size:13px;
  color:var(--gray66);
}
#footer


.foo__logo {
  width: 100%;
  text-align: center;
  margin: 30px 0 0;
}
.foo__logo img {
  width: 80px;
}

.scroll_top {
  display: none;
  width: 40px;
  height: 40px;
  background: #fff url(../images/top_icon.jpg?v=1) center no-repeat;
  background-size: 80%;
  position: fixed;
  right: 20px;
  bottom: -100px;
  border-radius: 5%;
  border: 1px solid #ddd;
  z-index: 9;
  opacity: 0.8;
  box-sizing: border-box;
}
.scroll_top.on {
  display: block;
  bottom:20px;
}


.modal {
  display: none;
}
.blackBg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 7;
}
.modal .modal_cont {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
  z-index: 9999;
  overflow-y: hidden;
}
.modal .modal_cont .scroll {
  overflow-x: hidden;
  overflow-y: visible;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.modal .close {
  position: absolute;
  top: 18px;
  right: 30px;
  width: 15px;
  height: 15px;
  background: url("../images/ico-close.svg") no-repeat 50% 50% / 100%;
}
.modal .close img {
  width: 100%;
}
.modal .modal_cont h3 {
  position: relative;
  background: #f8f8f9;
  padding: 18px 30px;
  color: #0047ff;
  font-size: 16px;
  border-bottom: 1px solid #e0e5ec;
}
.modal .modal_cont .conts {
  padding: 30px;
}
.notScroll,
.not_scroll {
  overflow: hidden;
}

.bottom_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 1140px;
  height: 100%;
  z-index: 8;
  transform: translateX(-50%);
}
.bottom_modal .modal_cont {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 75vh; /* 230216 추가 */
  background: #fff;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
  border-radius: 10px 10px 0px 0px;
  z-index: 5;
  padding: 45px 20px 20px;
  transition: all 0.2s;
  box-sizing: border-box;
}
.bottom_modal .modal_cont .scroll {
  overflow-x: hidden;
  overflow-y: visible;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.bottom_modal .modal_cont .scroll div img {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: block;
}
.bottom_modal.open .black_bg {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.bottom_modal.open .modal_cont {
  bottom: 0;
}
.bottom_modal .close {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 15px;
  height: 15px;
  background: url("../images/ico-close.svg") no-repeat 50% 50% / 100%;
}
.bottom_modal h2 {
  font-size: 16px;
  margin-bottom: 20px;
}
.bottom_modal h2 + .txt {
  color: #8e8e8e;
  line-height: 1.5;
  font-size: 14px;
  height: 60vh;
}
.bottom_modal h2 + .txt::-webkit-scrollbar {
  width: 5px;
}
.bottom_modal h2 + .txt::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 5px;
}

.selec_lang {
  width: auto;
  background-image: url(../images/ic-website3.svg);
  background-size: 16px;
  background-position: left 5px;
  background-color: rgba(255, 255, 255, 0);
  background-repeat: no-repeat;
  padding-left: 16px;
  border: 0;
  font-size: 1em;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 3;
  margin-top: 30px;
}
.selec_lang select {
  width: 95px;
  border: 0;
  outline: 0;
  color: #555;
  padding: 0 20px 0 6px;
  text-indent: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../images/ico-down-gray.svg);
  background-position: right 5px;
  background-color: rgba(255, 255, 255, 0);
  background-repeat: no-repeat;
  background-size: 19px;
  font-size: 15px;
}
.selec_lang select:hover,
.selec_lang2 select:hover {
  cursor: pointer;
}
.selec_lang select option,
.selec_lang2 select option {
  background: rgba(255, 255, 255);
  border: 0;
}

.selec_lang2 {
  width: 90px;
  background-image: url(../images/ic-website3.svg);
  background-size: 16px;
  background-position: left 5px;
  background-color: rgba(255, 255, 255, 0);
  background-repeat: no-repeat;
  padding-left: 16px;
  border: 0;
  font-size: 1em;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 3;
  margin-top: 0px;
}
.selec_lang2 select {
  width: 95px;
  border: 0;
  outline: 0;
  color: #555;
  padding: 0 20px 0 6px;
  text-indent: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../images/ico-down-gray.svg);
  background-position: right 8px;
  background-color: rgba(255, 255, 255, 0);
  background-repeat: no-repeat;
  background-size: 15px;
  font-size: 15px;
}

.m_menuslide_wrap {
}
.m_menuslide_wrap.on {
}


.black_bg{
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
}
.black_bg.on{
  display:block;
}







.m_menuslide {
  width: 100%;
  max-width: 768px;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  right: -100%;
  z-index: 9;
  transition: 0.6s;
  touch-action: pan-y;
  overflow-y: scroll;
}
.m_menuslide + .black_bg {
  display: none;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
}
.m_menuslide.on + .black_bg {
  display: block;
}
.m_menuslide.on {
  right: 0;
}
.m_menuslide .m_logo {
  width: 100%;
  height: 65px;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.m_menuslide .m_logo img {
  width: 120px;
}
.m_menuslide .m_logo h1 a{
  color: var(--surfcolor);
  font-weight: 600;;
}
.m_menuslide .m_logo h1 {
  display: flex;
  align-items: center;
  font-size: 20px;
  /* width: calc(100% - 80px); */
  width: calc(100% - 140px);
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 25px;
  margin-top: 0px;
  line-height: 1.2;
  font-weight: 700;
}
.m_menuslide .m_logo span {
  width: 20px;
  height: 16px;
  background: url(../images/ico-close-thin.svg) no-repeat;
  margin: 12px 0px 12px 10px;
  position: absolute;
  right: 10px;
}

.m_menuslide.on .m_logo {
  position: fixed;
}
.m_menuslide.on .m_logo span {
  position: fixed;
  right: 10px;
}

.m_menuslide ul,
.m_menuslide ul.food_menu,
.m_menuslide ul.condate,
.m_menuslide ul.spa {
  margin-top: 10px;
  padding-top: 65px;
  display:flex;
  flex-wrap:wrap;
}


.m_menuslide ul li,
.m_menuslide ul.food_menu li,
.m_menuslide ul.condate li,
.m_menuslide ul.spa li {
  width: 33%;
  height: auto;
  text-align: center;
  margin-bottom:20px;;
}
.m_menuslide ul li a,
.m_menuslide ul.food_menu li a,
.m_menuslide ul.condate li a,
.m_menuslide ul.spa li a {
  width: 100%;
  display: block;
  color: #fff;
  font-size: 14px;
  /* background: url(../images/ic_arrow_right_white.svg) 93% center no-repeat; */
  /* background-size: 20px; */
  /* padding-left: 65px; */
  padding-top:65px;
  box-sizing: border-box;
}
.m_menuslide ul li:first-child,
.m_menuslide ul.food_menu li:first-child,
.m_menuslide ul.condate li:first-child,
.m_menuslide ul.spa li:first-child,
.m_menuslide ul.onsen li:first-child {
  background: url(../images/menu_iconbg01.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.ryo_dining,
.m_menuslide ul.condate li:nth-child(2) {
  background: url(../images/menu_iconbg02.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.room {
  background: url(../images/menu_iconbg03.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.ryo_facil {
  background: url(../images/menu_iconbg04.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.ryo_spa {
  background: url(../images/menu_iconbg05.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.ryo_service {
  background: url(../images/menu_iconbg06.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li:nth-child(7) {
  background: url(../images/menu_iconbg07.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li:nth-child(8) {
  background: url(../images/menu_iconbg08.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li:nth-child(9) {
  background: url(../images/menu_iconbg09.png)  center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.ryo_reser {
  background: url(../images/menu_iconbg05_sc.png?v=1) center no-repeat;
  background-size: 40px;
}


.m_menuslide ul li.faq {
  background: url(../images/menu_iconbg10.png) center no-repeat;
  background-size: 40px;
}

.m_menuslide ul li.sns {
  background: url(../images/ic_share_white.svg?v=1) center no-repeat;
  background-size: 25px;
}

.m_menuslide ul li.rules{
  background: url(../images/menu_icon15.png) center no-repeat;
  background-size: 40px;
}


.m_menuslide ul.second_menu li:nth-child(2) {
  background: url(../images/menu_iconbg02_sc.png) center no-repeat;
  background-size: 26px;
}

.m_menuslide ul.second_menu{
  margin-top: 10px;
  padding-top: 65px;
}
.m_menuslide ul.second_menu li{
  width: 100%;
  height: 46px;
  text-align: left;
  margin-bottom:0;
}

.m_menuslide ul.second_menu li a{
  width: 100%;
  display: block;
  color: #fff;
  font-size: 17px;
  line-height: 46px;
  background: url(../images/ic_arrow_right_white.svg) 93% center no-repeat;
  background-size: 20px;
  padding:0 0 0 65px;
  box-sizing: border-box;
}
.m_menuslide ul.second_menu li.bg_none {
  background: none;
}
.m_menuslide ul.second_menu li.meal a,
.m_menuslide ul.second_menu li.alcohol a,
.m_menuslide ul.second_menu li.drink a {
  padding-left: 100px;
}
.m_menuslide ul.second_menu li.meal {
  background: url(../images/ic_meal.svg) 65px center no-repeat;
  background-size: 18px;
}
.m_menuslide ul.second_menu li.alcohol {
  background: url(../images/ic_alcohol.svg) 65px center no-repeat;
  background-size: 23px;
  background-position:62px;
}
.m_menuslide ul.second_menu li.drink {
  background: url(../images/ic_drink.svg) 65px center no-repeat;
  background-size: 16px;
}
.m_menuslide ul.second_menu li.no_food {
  background: url(../images/ic_nofood_white.svg) 22px center no-repeat;
  background-size: 24px;
}
.m_menuslide ul.second_menu li.reser{
  background: url(../images/ic_schedule_white.svg) 22px center no-repeat;
  background-size: 22px;
}
.m_menuslide ul.second_menu li.basic_info{
  background: url(../images/ic_infobasic_wihte.svg?v=1) 22px center no-repeat;
  background-size: 22px;
}
.m_menuslide ul.second_menu li.setting{
  background: url(../images/ic_settings_white.svg) 22px center no-repeat;
  background-size: 22px;
}
.m_menuslide ul.second_menu li.sns{
  background: url(../images/ic_share_white.svg?v=1) 22px center no-repeat;
  background-size: 22px;
}
.m_menuslide ul.second_menu li.menu_book {
  background: url(../images/ic_menu_white.svg) 22px center no-repeat; /* 메뉴 안돼는거 주석처리하고 바꿈.*/
  background-size: 20px;
}
/*.m_menuslide ul.second_menu li:nth-child(7) {
   background: url(../images/menu_iconbg06.png) 25px center no-repeat; 메뉴 안돼는거 주석처리하고 바꿈.*/
  /* background: url(../images/menu_iconbg05_sc.png) 25px center no-repeat; */
  /* background-size: 26px; 
}*/
.m_menuslide ul.second_menu li.loca{
  background: url(../images/ic_location_white.svg) 22px center no-repeat;
  background-size: 22px;
}
/* .m_menuslide ul.second_menu li:nth-child(8) {
  background: url(../images/ic_infobasic_wihte.svg) 22px center no-repeat;
  background-size: 22px;
} */

.m_menuslide ul.second_menu li.research {
  background: url(../images/ic_research_white.svg) 22px center no-repeat;
  background-size: 22px;
}
.m_menuslide ul.second_menu li.allStore{
  background: url(../images/ic_store_white.svg) 22px center no-repeat;
  background-size: 27px;
}
.m_menuslide ul.second_menu li.store {
  background: url(../images/ic_store_white.svg) 22px center no-repeat;
  background-size: 27px;
}
/* 식당 */
.m_menuslide ul.food_menu li:nth-child(2) {
  background: url(../images/menu_iconbg_fd02.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.food_menu li:nth-child(3) {
  background: url(../images/menu_iconbg_fd13.svg) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.food_menu li:nth-child(4) {
  background: url(../images/menu_iconbg_fd12.svg) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.food_menu li:nth-child(5) {
  background: url(../images/menu_iconbg_fd11.svg) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.food_menu li:nth-child(6) {
  background: url(../images/menu_iconbg_fd14.svg) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.food_menu li:nth-child(7) {
  background: url(../images/menu_iconbg_fd07.png) center no-repeat;
  background-size: 40px;
}

/*콘다테*/

.m_menuslide ul.condate li:nth-child(3) {
  background: url(../images/menu_iconbg08.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.condate li:nth-child(4) {
  background: url(../images/menu_icon_condate01_bg.png?v=2) 25px center
    no-repeat;
  background-size: 40px;
}

.m_menuslide ul.condate li:nth-child(5) {
  background: url(../images/menu_icon_condate02_bg.png?v=3) 25px center
    no-repeat;
  background-size: 40px;
}

/* 온천 */
.m_menuslide ul.spa li:nth-child(2) {
  background: url(../images/menu_iconbg08.png?v=2) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.spa li:nth-child(3) {
  background: url(../images/menu_iconbg03.png?v=2) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.spa li:nth-child(4) {
  background: url(../images/menu_iconbg09.png?v=2) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.spa li:nth-child(5) {
  background: url(../images/menu_iconbg07.png?v=2) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul.spa li:nth-child(6) {
  background: url(../images/menu_iconbg10.png?v=2) center no-repeat;
  background-size: 40px;
}

/* 온천지 */
.m_menuslide ul li.basic {
  background: url(../images/menu_iconbg01.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.loca {
  background: url(../images/menu_iconbg08.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.spa {
  background: url(../images/menu_iconbg05.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.room {
  background: url(../images/menu_iconbg03.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.food {
  background: url(../images/menu_iconbg02.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.shop {
  background: url(../images/menu_iconbg06.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.tourism {
  background: url(../images/menu_iconbg09.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.product {
  background: url(../images/menu_iconbg07.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.photo {
  background: url(../images/menu_iconbg14.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.faq {
  background: url(../images/menu_iconbg10.png) center no-repeat;
  background-size: 40px;
}
.m_menuslide ul li.golf {
  background: url(../images/menu_iconbg13.png?v=1) center no-repeat;
  background-size: 40px;
}




/* 숍 메뉴 이마데야긴자 */
.m_menuslide .second_menu .product{
  background: url(../images/ic-bottle-white.svg) 26px no-repeat;
  background-size: 13px;
}





/* .ryokan,
.dining {
	padding-top:65px;
	overflow-y: scroll;
} */

.m_menu_banner{
  width:100%;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.m_menu_banner img{
  width:100%;
}


.partner_login {
  width: 84%;
  height: auto;
  border: 1px solid #fff;
  border-radius: 5px;
  margin: 50px auto 0;
  text-align: center;
  padding: 10px 0;
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  box-sizing: border-box;
}
.partner_login a {
  font-size: 14px;
  display: block;
  color: #fff;
  line-height: 1.2;
}

.sharebtn {
  width: 84%;
  height: auto;
  border: 1px solid #fff;
  border-radius: 5px;
  margin: 50px auto 0;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.sharebtn div {
  display: flex;
}

.sharebtn p {
  font-size: 14px;
  padding: 7px 10px;
  color: #fff;
  line-height: 1;
}
.sharebtn p:first-child {
  width: calc(100% - 100px);
  text-overflow: ellipsis;
  overflow: hidden;
  /* display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1; */
  cursor: pointer;
  height: auto;
  line-height: 24px;
}
.sharebtn p:last-child {
  background: url(../images/ic_share.svg) 5px center no-repeat;
  background-size: 24px;
  padding-left: 35px;
  cursor: pointer;
  border-left: 1px solid #fff;
  line-height: 24px;
  z-index: 9;
}

#shareBox {
  margin-bottom: 20px;
}

.ryokan {
  padding-top: 65px;
  overflow-y: scroll;
}

#image_zoom {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  max-width: 1140px;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: #222;
  z-index: 5;
}
#image_zoom .scroll {
  max-height: calc(100vh - 36px);
  height: 100% !important;
  overflow-x: hidden;
  overflow-y: visible;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#image_zoom .tabs {
  padding: 20px 20px 0;
  background: #222;
}
#image_zoom .tabs .swiper-slide {
  width: auto;
  margin-right: 10px;
}
#image_zoom .tabs button {
  border: 1px solid #ababab;
  color: #ababab;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 15px;
}
#image_zoom .tabs button.active {
  border: 1px solid #fff;
  color: #fff;
}
#image_zoom .tab_cont {
  margin-top: 20px;
}
#image_zoom .tab_cont > div {
  position: relative;
  overflow: hidden;
  visibility: hidden;
  height: 0;
  opacity: 0;
}
#image_zoom .tab_cont > div.active {
  overflow: visible;
  visibility: visible;
  height: auto;
  opacity: 1;
}
#image_zoom .gallery-top {
  width: 100%;
  overflow: hidden;
}
#image_zoom .gallery-thumbs {
  height: 20%;
  box-sizing: border-box;
  padding: 12px 10px;
  overflow: hidden;
}
#image_zoom .gallery-thumbs .swiper-slide {
  height: 100%;
  opacity: 0.8;
  border: 1px solid transparent;
  box-sizing: border-box;
}
#image_zoom .gallery-top .swiper-slide .swiper-slide-container {
  width: 100%;
}
#image_zoom .gallery-thumbs .swiper-slide .swiper-slide-container {
  width: 100%;
  height: 100%;
}
#image_zoom .swiper-slide-container img {
  width: 100%;
  height: 100%;
}
#image_zoom .gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border: 1px solid #fff;
}
#image_zoom .swiper-button-next {
  background: url("../images/ic_arrow_right.svg") no-repeat 50% 50% / 35px;
  margin-top: -105px;
}
#image_zoom .swiper-button-prev {
  background: url("../images/ic_arrow_left.svg") no-repeat 50% 50% / 35px;
  margin-top: -105px;
}
#image_zoom .swiper-pagination {
  position: static;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 15px 0 25px;
}
#image_zoom .del {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.7) url("../images/ico-del.svg") no-repeat
    10px 50%;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
  border-radius: 13.5px;
  z-index: 2;
  padding: 5px 10px 5px 25px;
}
#image_zoom .min-slide .gallery-thumbs .swiper-slide-active {
  opacity: 1;
  border: 1px solid #fff;
}


.radio_chk li,
.radio_chk_half li {
  margin-bottom:20px;
  text-align: left;;
}
.radio_chk_half {
  display:flex;
  flex-wrap:wrap;
}
.radio_chk_half li{
  width:50%;
}

.radio_chk_half li input[type="radio"],
.radio_chk li input[type="radio"]{
  display:none;
}
.radio_chk_half li input[type="radio"] + label,
.radio_chk li input[type="radio"] + label{
  height: 20px !important;
  background: url("../images/radio.svg") left 1px no-repeat;
  background-size: 15px;
  font-size: 14px !important;
  width:100%;
  padding-left:20px;
  display: block;;
  font-weight:400 !important;
  word-break: break-all;
}
.radio_chk_half li input[type="radio"]:checked + label,
.radio_chk li input[type="radio"]:checked + label{
  background: url("../images/radio_on.svg") left 1px no-repeat;
  background-size: 15px;
}

.lang_pop{
  width:100%;
  max-width:350px;
  background:#fff;
  padding:25px; 
  position: fixed;
  left:50%;
  top:50%;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
  transition: .2s;
  transform: translate(-50%, -50%);
  z-index:3;
  box-sizing: border-box;
  border-radius: 5px;;
  display:none;
  z-index:8;
}

.lang_pop span.close{
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: url("../images/ico-close-white.svg") no-repeat 50% 50% / 100%;
}

.lang_pop h3{
  font-size:16px;
  color:#222;
  font-weight: 600;
  padding-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid #ddd;
}

.lang_pop .radio_chk{

}
.lang_pop .radio_chk li{
  margin:25px 0;
  text-align: center;
}
.lang_pop .radio_chk li input[type="radio"]+label{
  background:none;
  padding-left:0;
  font-weight: 500;
  font-size:16px;
}
.lang_pop .radio_chk li input[type="radio"]:checked+label{
  color:#ec463d;
}




.pop{
  width:80%;
  max-width:700px;
  background:#fff;
  padding:20px; 
  position: fixed;
  left:50%;
  top:50%;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
  transition: .2s;
  transform: translate(-50%, -50%);
  z-index:3;
  box-sizing: border-box;
  border-radius: 5px;;
  display:none;
  z-index:10 !important;
}

.pop span.close{
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: url("../images/ico-close-white.svg") no-repeat 50% 50% / 100%;
}

.pop h3{
  font-size:16px;
  color:#222;
  font-weight: 500;
  margin-bottom:20px;
  padding-bottom:6px;
  border-bottom:1px solid #ddd;
  text-align: center;
}
.pop p.scroll_ment{
  font-size:12px;
  text-align:right;
  margin-bottom:10px;;
}


.pop .scroll{
  height: 400px;
  overflow-y: scroll;
}
.pop .mini_scroll{
  height: 250px;
  overflow-y: scroll;
}
.pop .scrollAuto{
  height:auto;
  max-height: 80vh;
  overflow-y:scroll;
}

.pop .scroll_mini{
  height: 120px;
  overflow-y: scroll;
}
.pop .scroll_ment{
  font-size:12px;
  color: var(--gray66);
  text-align: right;
}

/* 필터팝업 tit */
.pop h4{
  font-size:15px;
  font-weight: 500;
  margin-bottom:15px;;
}

/* 모바일세로메뉴 */
.m_menuslide_wrap .m_menuslide .mobileSeroMenu{
  display:block;
  width:100%;
  padding-top:0px;
  margin-top:0p
}
.m_menuslide_wrap .m_menuslide .mobileSeroMenu li{
  border-bottom:1px solid var(--graydd);
  background:url(../images/arrow-right.svg) calc(100% - 20px) center no-repeat;
  background-size:9px;
  padding:10px 0 20px;
  width:100%;
  text-align:left;
  margin-bottom:0;
}
.m_menuslide_wrap .m_menuslide .mobileSeroMenu li a{
  font-size:15px;
  padding:0 20px;
  color:var(--black22);
  display:block;
  width:100%;
  padding-left:50px;
  height:30px;
  line-height:30px;
}

.m_menuslide_wrap .m_menuslide .mobileSeroMenu li.foodmall a{
  background:url(../images/menu_icon_foodmall.svg) 15px center no-repeat;
  background-size: 25px;
}
.m_menuslide_wrap .m_menuslide .mobileSeroMenu li.rest a{
  background:url(../images/menu_icon_rest.svg) 15px center no-repeat;
  background-size: 25px;
}
.m_menuslide_wrap .m_menuslide .mobileSeroMenu li.cuisine a{
  background:url(../images/menu_icon_cuisine.svg) 15px center no-repeat;
  background-size: 25px;
}
.m_menuslide_wrap .m_menuslide .mobileSeroMenu li.signature a{
  background:url(../images/menu_icon_signature.svg) 15px center no-repeat;
  background-size: 25px;
}
.m_menuslide_wrap .m_menuslide .mobileSeroMenu li.brand a{
  background:url(../images/menu_icon_brand.svg) 15px center no-repeat;
  background-size: 25px;
}




@media screen and (max-width: 1140px) {
}
@media screen and (max-width: 768px) {
  .bottom_modal .modal_cont .scroll div img {
    max-width: 400px;
  }
}
@media screen and (max-width: 520px) {
  .bottom_modal .modal_cont .scroll div img {
    max-width: 350px;
  }
}
@media screen and (max-width: 480px) {
  .m_menuslide .m_logo h1{
    width:calc(100% - 100px);
  }
}
@media screen and (max-width: 420px) {
  .m_menuslide .m_logo h1{
    width:calc(100% - 70px);
  }
}
@media screen and (max-width: 380px) {
  #titleArea strong {
    /* padding:0 34%; */
  }
  .bottom_modal .modal_cont .scroll div img {
    max-width: 270px;
  }
}

@media screen and (max-width: 320px) {
  body{
    width:100%;
    max-width: 320px;;
    overflow-x:scroll;
  }
}